<template>
	<view>
		<uni-forms ref="form" :model="formData" label-position="top" :rules="rules" border="true">
			<uni-forms-item label="姓名" name="name">
				<uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" />
			</uni-forms-item>
			<uni-forms-item label="年龄" name="age">
				<input type="text" v-model="formData.age" placeholder="请输入年龄" />
			</uni-forms-item>
			<uni-forms-item label="邮箱" name="email">
				<uni-easyinput type="text" v-model="formData.email" placeholder="请输入邮箱" />
			</uni-forms-item>
			<uni-forms-item required name="hobby" label="兴趣爱好">
				<uni-data-checkbox multiple v-model="formData.hobby" :localdata="range" @change="change"></uni-data-checkbox>
			</uni-forms-item>
			<uni-forms-item label="自我介绍">
				<uni-easyinput type="textarea" v-model="formData.introduction" placeholder="请输入自我介绍" />
			</uni-forms-item>
			<uni-forms-item label="日期时间">
				<uni-datetime-picker type="datetime" return-type="timestamp" v-model="formData.datetimesingle"/>
			</uni-forms-item>
		</uni-forms>
		<button type="primary" @click="submitForm">Submit</button>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					name: '',
					age: 0,
					email: '',
					hobby: [0],
					introduction: '',
					datetimesingle: 0
				},
				rules: {
					// 对name字段进行必填验证
					name: {
						// name 字段的校验规则
						rules: [
							// 校验 name 不能为空
							{
								required: true,
								errorMessage: '请填写姓名',
							},
							// 对name字段进行长度验证
							{
								minLength: 3,
								maxLength: 5,
								errorMessage: '{label}长度在 {minLength} 到 {maxLength} 个字符',
							}
						],
						// 当前表单域的字段中文名，可不填写
						label:'姓名',
						validateTrigger: 'submit'
					},
					age: {
						rules: [
							{
								required: true,
								errorMessage: '请填写年龄'
							},
							{
								format: 'number',
								errorMessage: '年龄必须是数字',
							},
							{
								range: [20, 80],
								errorMessage: '年龄要20到80之间.',
							},
							{
								validateFunction:function(rule, value, data, callback) {
									//同步校验 
									if (value < 10) {
										callback('年龄不能小于10岁')
									}
									else if (value > 100) {
										callback('年龄不能大于100岁')
									}
								}
							}
						]
					},
					email: {
						rules: [
							{
								required: true,
								errorMessage: '请填写邮箱'
							},
							{
								format: 'email',
								errorMessage: '请输入正确地Email格式!'
							}
						]
					},
					hobby: {
						rules:[
							{
								required: true,
								errorMessage: '请选择兴趣爱好！'
							},
							{
								validateFunction:(rule, value, data, callback) => {
									// 异步需要返回 Promise 对象
									return new Promise((resolve, reject) => {
										setTimeout(() => {
											if (value.length < 2) {
												reject(new Error('请至少勾选两个兴趣爱好'));
											}
											else {
												resolve();
											}
										}, 2000)
									})
								}
							}
						]
					}
				},
				range: [{"value": 0,"text": "篮球"},{"value": 1,"text": "足球"},{"value": 2,"text": "游泳"}]
			}
		},
		
		onReady() {
			//uni-forms 使用属性绑定 :rules="rules" 就不需要代码设置rules
			// this.$refs.form.setRules(this.rules);
		},
		methods: {
			change(e){
				console.log('e:',e);
				uni.showToast({
					title: '你选择了' + e.detail.value.length
				});
			},
			submitForm() {
				uni.showLoading();
				this.$refs.form.validate().then(res=>{
					// 成功返回，res 为表单数据
					console.log('表单数据信息：', res);
					uni.showToast({
						title: 'Success!'
					});
					uni.hideLoading();
				}).catch(err=>{
					// 表单校验验失败，err 为具体错误信息
					console.log('表单错误信息：', err);
					uni.showToast({
						title: 'Error:' + err
					});
					uni.hideLoading();
				});
			}
		}
	}
</script>

<style>

</style>
